//给h1的三个span和button设置点击事件
var span1 = document.querySelector('h1>span:nth-of-type(1)')
span1.onclick = function () {
    location.href = "../index.html"
}
var span2 = document.querySelector('h1>span:nth-of-type(2)')
span2.onclick = function () {
    location.href = "./1.html"
}
var span3 = document.querySelector('h1>span:nth-of-type(3)')
span3.onclick = function () {
    location.reload()
}
var button = document.querySelector('h1>button')
button.onclick = function () {
    location.reload()
}
var main = document.querySelector('main')
// console.log(main)
var ul = document.querySelector('ul')
var select = document.querySelector('select')
// console.log(select)
// console.log(location.href)
var url = location.href
var wangzhi = getUrlParams(url)
// console.log(wangzhi)
let { categoryid } = wangzhi
let { pageid } = wangzhi

let { span11 } = wangzhi
//将span1的值给h1的第三个span
span3.innerText = span11

var chushi = 1

function fn() {
    var xhr = new XMLHttpRequest()
    xhr.open('get', `http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=` + chushi)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            var yema1 = JSON.parse(xhr.responseText).totalCount
            var yema2 = JSON.parse(xhr.responseText).pagesize
            var yema = Math.ceil(yema1 / yema2)
            // console.log(yema)

            var x = JSON.parse(xhr.responseText).result
            console.log(x)
            var html = ""
            var html2 = ''
            x.forEach(item => {
                html += `
                <li value=${item.productId} class=${item.productName}>
                ${item.productImg}
                    <h4>${item.productName}</h4>
                    <b>${item.productPrice}</b>
                    <span>${item.productQuote}</span>
                    <i>${item.productCom}</i>
                </li>`
            });

            // lis.forEach((iteml)=>{
            //     iteml.onclick=function(){
            //         console.log(1)
            //     }

            // })
            //获取1/3 2/3  3/3
            var jianzhi = 1
            for (jianzhi; jianzhi <= yema; jianzhi++) {
                html2 += `<option value=${jianzhi}>${jianzhi}/${yema}</option>`
            }
            console.log(html2)
            ul.innerHTML = html
            select.innerHTML = html2
            //获取里面的li 添加点击事件
            console.log(ul)
            var li = document.querySelectorAll('main>ul>li')
            console.log(li)
            li.forEach((item) => {
                item.onclick = function () {
                    var productid = item.getAttribute('value')
                    var y = item.getAttribute('class')
                    console.log(y)

                    location.href = `./1跳转跳转页.html?categoryid=${categoryid}&productid=${productid}&span11=${span11}&span12=${y}`
                }
            })

        }
    }
}
fn()
//变动页码的函数
function jn() {
    var xhr = new XMLHttpRequest()
    xhr.open('get', `http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=` + chushi)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            var yema1 = JSON.parse(xhr.responseText).totalCount
            var yema2 = JSON.parse(xhr.responseText).pagesize
            var yema = Math.ceil(yema1 / yema2)
            //实现页码变动
            html3 = `<option value=${chushi}>${chushi}/${yema}</option>`
            var jianzhi = 1
            for (jianzhi; jianzhi <= yema; jianzhi++) {
                html3 += `<option value=${jianzhi}>${jianzhi}/${yema}</option>`
            }

            console.log(html3)
            select.innerHTML = html3
            //获取变动的页码标签，再给他消失
            var opt1 = document.querySelector('select>option:nth-of-type(1)')
            console.log(opt1)
            opt1.style.display='none'
        }
    }
}

var xhrw = new XMLHttpRequest()
xhrw.open('get', `http://chst.vip:1234/api/getproductlist?categoryid=${categoryid}&pageid=` + 1)
xhrw.send()
xhrw.onreadystatechange = function () {
    if (xhrw.status === 200 && xhrw.readyState === 4) {
        var yema1 = JSON.parse(xhrw.responseText).totalCount
        var yema2 = JSON.parse(xhrw.responseText).pagesize
        var yema = Math.ceil(yema1 / yema2)
        //获取上下页的点击按钮
        var btn1 = document.querySelector('main>button:nth-of-type(1)')
        var btn2 = document.querySelector('main>button:nth-of-type(2)')
        btn1.disabled = true
        // 获取下拉框页码
        select.onchange = function () {
            console.log(select.value)
            chushi = (select.value)
            // console.log(chushi)
            fn()
            jn()
            if(chushi!==0&&chushi!==yema){
                btn1.disabled=false
                btn2.disabled=false  
             }
             if(chushi==yema){
                btn2.disabled=true
                btn1.disabled=false
            }
            if(chushi==1){
                btn1.disabled=true
                btn2.disabled=false
            }
        }
        btn1.onclick = function () {
            btn2.disabled = false
            chushi--
            select.value = chushi
            if (chushi == 1) {
                btn1.disabled = true
            }
            fn()
            jn()
        }
        btn2.onclick = function () {
            btn1.disabled = false
            chushi++
            select.value = chushi
            if (chushi == yema) {
                btn2.disabled = true
            }
            fn()
            jn()
        }
    }
}
//书写返回index.html功能
var fanhui = document.querySelector('header>a')
fanhui.onclick = function () {
    location.href = "../index.html"
}







